<template>
  <div class="home container" v-title :data-title="$t('router.homePageTitle')">
    <banner></banner>
    <album :list="list.newAlbums"></album>
    <artist></artist>
    <v-area :list="list.regions"></v-area>
    <sort :list="list.categories"></sort>
    <v-video :list="list.videos"></v-video>
    <audio-book :list="list.audioBooks"></audio-book>
    <music-score :list="list.scores"></music-score>
    <div class="flex-box" v-if="!isMobile">
      <!-- 安卓 -->
      <div class="flex-and" :title="$t('home.scanQRDownloadAnd')">
        <div class="flex-tit">
          <span class="ellipsis-two">{{ $t("home.scanQRDownloadAnd") }}</span>
        </div>
        <el-image class="qrCode" :src="require('assets/images/androidQR.png')">
          <div slot="placeholder" class="image-slot flex-center flex-column">
            <i class="iconfont el-icon-loading"></i>
            <p>{{ $t("public.loading") }}<span class="dot">...</span></p>
          </div>
          <div slot="error" class="image-slot error-text">
            <span v-text="$t('home.comingSoon')"></span>
          </div>
        </el-image>
      </div>
      <!-- IOS -->
      <div class="flex-ios" :title="$t('home.scanQRDownloadIos')">
        <div class="flex-tit">
          <span class="ellipsis-two">{{ $t("home.scanQRDownloadIos") }}</span>
        </div>
        <el-image class="qrCode" :src="require('assets/images/iosQR.png')">
          <div slot="placeholder" class="image-slot flex-center flex-column">
            <i class="iconfont el-icon-loading"></i>
            <p>{{ $t("public.loading") }}<span class="dot">...</span></p>
          </div>
          <div slot="error" class="image-slot error-text">
            <span v-text="$t('home.comingSoon')"></span>
          </div>
        </el-image>
      </div>
      <!-- <img
        class="qrCode"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd9deb59c6ae753aabf12edd739ed6438315eb2bff46fb83eb04222b54d3c0431"
      /> -->
    </div>
    <nice-empty
      v-show="list.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
  </div>
</template>

<script>
import Banner from "@/components/home/banner/Index";
import Album from "@/components/home/album/Index";
import Artist from "@/components/home/artist/Index";
import vArea from "@/components/home/area/Index";
import Sort from "@/components/home/sort/Index";
import vVideo from "@/components/home/video/Index";
import AudioBook from "@/components/home/audioBook/Index";
import MusicScore from "@/components/home/musicScore/Index";
export default {
  name: "home",
  data() {
    return {
      list: {},
      fullscreenLoading: true,
    };
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  components: {
    Banner,
    Album,
    Artist,
    vArea,
    Sort,
    vVideo,
    AudioBook,
    MusicScore,
  },
  mounted() {
    this.getHome();
  },
  methods: {
    // 获取应用首页内容
    async getHome() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.home.getHome({});
        if (res.code === 1000000) {
          this.list = res.source ? res.source : {};
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .flex-box {
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 20%;
    right: 6px;
    .flex-tit {
      width: 240px;
      // height: 50px;
      text-align: center;
      background: #a1322c;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      span {
        display: inline-block;
        max-width: 230px;
      }
    }
    .qrCode {
      width: 240px;
      height: 240px;
      text-align: center;
      .error-text {
        width: 240px;
        height: 240px;
        line-height: 240px;
        display: block;
        border: 1px solid #000;
        font-size: 30px;
      }
    }
  }
}
</style>
